<template>
	<div id="top">
	<div>
		<div class="bottone">
			<div class="echarts">
				<div class="boxsi">
					<div style="width: 50%">
						<div class="imgbox">
							<i class="el-icon-user-solid" style="color: #40c9c6; font-size: 40px; margin-top: 14px;"></i>
						</div>
					</div>
					<div class="num">
						<div>商品数量</div>
						<div><countTo :startVal='startVal' :endVal='num' :duration='duration'></countTo></div>
					</div>
				</div>
				<div class="boxsi">
					<div style="width: 50%">
						<div class="imgbox">
							<i class="el-icon-chat-dot-square" style="color: #36a3f7; font-size: 40px;margin-top: 14px;"></i>
						</div>
					</div>
					<div class="num">
						<div>未发货单</div>
						<div><countTo :startVal='startVal' :endVal='issued' :duration='duration'></countTo></div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div style="width:65%;height:450px;margin: auto; margin-left: 600px; background-color: #F0F2F5;" id="main"></div>
			<div style="width:45%;height:400px;float: left; margin-top: 0px; background-color: #F0F2F5;" id="discount"></div>
			<div style="width:55%;height:400px;float: right; margin-top: 0px;background-color: #F0F2F5;">
				<div style="width:50%;height:400px; float: left; background-color: #F0F2F5;" id="nature"></div>
				<div style="width:50%;height:400px; float: right; background-color: #F0F2F5;" id="oysder"></div>
			</div>
		</div>
		<div>
		</div>
	</div>
		</div>
</template>

<script>
	 import countTo from 'vue-count-to';
	let echarts = require("echarts/lib/echarts");
	require("echarts/lib/chart/bar");
	export default {
		components: { countTo },
		data() {
			return {
				bovig: '',
				city: '',
				puyer: '',
				num: 1, //商品数量
				issued: 1, //未发货单
				startVal: 1,//
				duration:1000,//
				// endVal: 2
			};
		},
		created() {
			this.initCharts()
		},
		mounted() {
			this.initCharts();
		},
		methods: {
			initCharts() {
				this.axios.get('/admin', {
					params: {
						_gp: 'admin.dashboard',
						_mt: 'integral',
					}
				}).then((res) => {
					console.log(res)
					//
					this.num = res.data.data.goodsCount //未发货单
					this.issued = res.data.data.waitStockCount //未发货单this.fors()
					this.bovig = res.data.data.daysOrder
					this.diug();
					this.indexs();

					var myCaler = echarts.init(document.getElementById("nature"));
					this.city = res.data.data.area
					var equa;
					equa = {
						title: {
							text: '订单地区分布',
							left: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							data: ["地区分布"],
							left: 'right'
						},
						series: [{
							name: '地区分布',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: this.city,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					equa && myCaler.setOption(equa);

					var myCaqunt = echarts.init(document.getElementById("oysder"));
					this.puyer = res.data.data.channel
					var black;
					black = {
						title: {
							text: '订单渠道分布',
							left: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						series: [{
							name: '地区分布',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: this.puyer,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					black && myCaqunt.setOption(black);
				})
			},

			diug() { //7日订单
				var myChart = echarts.init(document.getElementById("main"));
				var option;
				option = {
					title: {
						text: '7日订单',
						textalign: 'left'
					},
					color: ['#00B5FF'],
					legend: {
						data: ["订单数"],
						left: 'right'
					},
					xAxis: { 
						type: 'category',
						data: this.bovig[0]
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					series: [{
						name: '订单数',
						data: [800, 930, 900, 930, 1250, 1300, 1250],
						barWidth: '30%',
						type: 'bar'
					}]
				};
				option && myChart.setOption(option);
			},

			indexs() { //七日成交定额
				var myhover = echarts.init(document.getElementById("discount"));
				var berigng;
				berigng = {
					title: {
						text: '7日成交金额',
						textalign: 'left'
					},
					color: ['#00B5FF'],
					legend: {
						data: ["订单数"],
						left: 'right'
					},
					xAxis: {
						type: 'category',
						data: this.bovig[0]
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					series: [{
						name: '订单数',
						data: [800, 930, 900, 930, 1250, 1300, 1250],
						barWidth: '30%',
						type: 'line'
					}]
				};
				berigng && myhover.setOption(berigng);
			},
		},
	}
</script>

<style scoped="scoped" sess="sess">
	/* body{background-color: #000000 !important;} */
	#top{background-color: #F0F2F5;}
	.bottone {
		width: 500px;
		height: 400px;
		position: absolute;
		left: 35px;
		top: 30px;
	}
	.echarts {
		width: 400px;
		height: 70px;
		margin-left: 10%;
		margin-top: 40px;
	}
	
	.echarts img {
		width: 50px;
		height: 50px;
	}
	.boxsi {
		width: 400px;
		height: 150px !important;
		background: white;
		display: flex;
	}
	.boxsi[data-v-5d6a8484] {
		margin-bottom: 2%;
	}
	.imgbox {
		width: 80px;
		height: 70px;
		margin-left: 11%;
		margin-top: 28px;
		text-align: center;
		line-height: 60px;
	}
	.imgbox:nth-child(1):hover {
		background: #69AFB8;
		/* border-radius: 10px; */
	}
	.num {
		width: 100px;
		height: 100px;
		margin-top: 12%;
	}
</style>
